<template>
  <div class="page-container">
    <SelectTrigger label="加载模型的方式：" :options="options" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    selectionIndicator: false, //
    shadows: true,
    shouldAnimate: true,
  });
  const imageUrl = "/src/assets/image/Cesium_Logo_overlay.png";
  options.value = [
    {
      text: "添加广告牌",
      onselect: function () {
        viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
          },
        });
      },
    },
    {
      text: "创建时设置广告牌属性",
      onselect: function () {
        viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl, // 资源地址
            show: true, // 是否展示
            // pixelOffset: new Cesium.Cartesian2(0, -50), // 偏移量
            eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // 设置在眼坐标中应用于此广告牌的3D笛卡尔偏移
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 获取或设置此广告牌的水平原点，确定该广告牌是否为在其锚位置的左侧，中央或右侧。
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直原点
            scale: 2.0, // default: 1.0 缩放
            color: Cesium.Color.LIME, // default: WHITE
            rotation: Cesium.Math.PI_OVER_SIX, // 旋转角度
            alignedAxis: Cesium.Cartesian3.ZERO, // 获取或设置世界空间中的对齐轴。对齐的轴是广告牌向上向量指向的单位向量。默认值为零向量，这意味着广告牌与屏幕向上向量对齐。
            width: 50, // default: undefined
            height: 25, // default: undefined
          },
        });
      },
    },
    {
      text: "更改广告牌属性",
      onselect: function () {
        viewer.entities.removeAll();
        const entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(
            -75.59777,
            40.03883,
            300000.0
          ),
          billboard: {
            image: imageUrl,
          },
        });

        const billboard = entity.billboard;
        billboard.scale = 3.0;
        billboard.color = Cesium.Color.WHITE.withAlpha(0.25);
      },
    },
    {
      text: "广告牌实际大小",
      onselect: function () {
        viewer.entities.removeAll();
        const entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
            sizeInMeters: true, // 广告牌实际大小
          },
        });
        viewer.zoomTo(entity);
      },
    },
    {
      text: "添加多个广告牌",
      onselect: function () {
        viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
          },
        });
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
          billboard: {
            image: imageUrl,
          },
        });
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
          billboard: {
            image: imageUrl,
          },
        });
      },
    },
    {
      text: "大小按观看者距离缩放",
      onselect: function () {
        viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
            // 最大距离 最大比例  最小距离 最小比例
            scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
          },
        });
      },
    },
    {
      text: "透明度按观看者距离衰减",
      onselect: function () {
        viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
            // 近距离，透明度  远距离 透明度
            translucencyByDistance: new Cesium.NearFarScalar(
              1.5e2,
              2.0,
              1.5e7,
              0.1
            ),
          },
        });
      },
    },
    {
      text: "偏移量按观察者距离偏移",
      onselect: function () {
        viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          },
        });
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            // 偏移量
            pixelOffset: new Cesium.Cartesian2(0.0, 40), // 40的实际偏移
            // 偏移量比例变化
            pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
              1.0e3,
              1.0,
              1.5e6,
              0.0
            ),
            // 透明度变化
            translucencyByDistance: new Cesium.NearFarScalar(
              1.0e3,
              1.0,
              1.5e6,
              0.1
            ),
          },
        });
      },
    },
    {
      text: "添加标记广告牌(看不懂)",
      onselect: function () {
        //  imageSubRegion 将具有给定ID的图像的子区域用作此广告牌的图像，从左下角开始以像素为单位进行测量。
        viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          billboard: {
            image: imageUrl,
            imageSubRegion: new Cesium.BoundingRectangle(49, 43, 18, 18),
            color: Cesium.Color.LIME,
          },
        });
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-84.0, 39.0),
          billboard: {
            image: imageUrl,
            imageSubRegion: new Cesium.BoundingRectangle(61, 23, 18, 18),
            color: new Cesium.Color(0, 0.5, 1.0, 1.0),
          },
        });
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-70.0, 41.0),
          billboard: {
            image: imageUrl,
            imageSubRegion: new Cesium.BoundingRectangle(67, 80, 14, 14),
            color: new Cesium.Color(0.5, 0.9, 1.0, 1.0),
          },
        });
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-73.0, 37.0),
          billboard: {
            image: imageUrl,
            imageSubRegion: new Cesium.BoundingRectangle(27, 103, 22, 22),
            color: Cesium.Color.RED,
          },
        });
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(-79.0, 35.0),
          billboard: {
            image: imageUrl,
            imageSubRegion: new Cesium.BoundingRectangle(105, 105, 200, 18),
            color: Cesium.Color.YELLOW,
          },
        });
      },
    },
    {
      text: "添加canvas 广告牌",
      onselect: function () {
        viewer.entities.removeAll();
        const canvas = document.createElement("canvas");
        canvas.width = 16;
        canvas.height = 16;
        const context2D = canvas.getContext("2d");
        context2D.beginPath();
        context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
        context2D.closePath();
        context2D.fillStyle = "rgb(255, 255, 255)";
        context2D.fill();

        const billboards = viewer.scene.primitives.add(
          new Cesium.BillboardCollection()
        );
        billboards.add({
          imageId: "custom canvas point",
          image: canvas,
          position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
          color: Cesium.Color.RED,
          scale: 0.5,
        });
        billboards.add({
          imageId: "custom canvas point",
          image: canvas,
          position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
          color: Cesium.Color.BLUE,
        });
        billboards.add({
          imageId: "custom canvas point",
          image: canvas,
          position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
          color: Cesium.Color.LIME,
          scale: 2,
        });
      },
    },
  ];
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
